<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>

<style type="text/css" media="screen">
	
			

#req-states dt
{
	width: 100px;
	float: left;
}
#req-states dd
{
	padding-left: 20px;
	margin-left: 20px;
}
#req-states dd.ajax-loading
{
	margin-left: 80px;
	background:	url(http://demos.mootools.net/demos/Group/spinner.gif) no-repeat 0 0;
}
 
.tool-tip {
	color: #444;
	background-color: #eee;
	width: 300px;
	z-index: 13000;
}
 
.tool-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	color: #222;
	padding: 8px 8px 4px;
}
 
.tool-text {
	font-size: 11px;
	padding: 4px 8px 8px;
}


	</style>

<script type="text/javascript" src="mootools.r684.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
	var url = 'http://demos.mootools.net/demos/Group/lipsum.html?antiCache=';
var id = 0;
var tips = new Tips();
 
/**
 * reqState is a custom option, onRequest/onComplete can handle
 * it like a property. Its used here to take track of the element
 * for the specific Ajax requests.
 * 
 * We define options here because it saves code and all
 * Ajax instances have the same options. We also add a Tips::build
 * to show the responseText
 */
 
var options = {
	method: 'get',
	onRequest: function(){
		this.options.reqState
			.addClass('ajax-loading')
			.setHTML('Request ...');
	},
	onComplete: function(resp){
		this.options.reqState
			.removeClass('ajax-loading')
			.setProperty('title', 'Response: :: ' + resp)
			.setHTML('Complete!');
		tips.build(this.options.reqState);
 
	}
};
 
/**
 * a for loop here would be easier, but its better that way so you can
 * see whats in xhrs: 6 Ajax instances
 * 
 * The id is appended as url-parameter to prevent caching.
 */
var xhrs = [
	new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
	new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
	new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
	new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
	new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options)),
	new Ajax(url, $merge({reqState: $('req-state-' + (++id))}, options))
];
 
/**
 * The group, it has one Event that waits for all Ajax instances to finish
 * it: onComplete. When all requests are complete this onComplete is fired.
 */
var group = new Group(xhrs[0], xhrs[1], xhrs[2], xhrs[3], xhrs[4], xhrs[5]);
 
group
	.addEvent('onRequest', function() {
		$('req-state-all')
			.addClass('ajax-loading')
			.setHTML('All Requests started ...');
	}).
	addEvent('onComplete', function() {
		$('req-state-all')
			.removeClass('ajax-loading')
			.setHTML('All Completed!');
	});
 
/**
 * The last thing, the event which starts the request.
 */
$('req-start').addEvent('click', function(e) {
	new Event(e).stop();
 
	xhrs.each(function(xhr){
		xhr.url = url + $random(100, 999);
		xhr.request();
	});
});
});
</script>	
<body>


<h3>Group waits till all Ajax requests are done.</h3>
<a id="req-start" href="#">Start Requests</a>
<dl id="req-states">
	<dt>Request #1:</dt>
	<dd id="req-state-1">-</dd>
	<dt>Request #2:</dt>
	<dd id="req-state-2">-</dd>
	<dt>Request #3:</dt>
	<dd id="req-state-3">-</dd>
	<dt>Request #4:</dt>
	<dd id="req-state-4">-</dd>
	<dt>Request #5:</dt>
	<dd id="req-state-5">-</dd>
	<dt>Request #6:</dt>
	<dd id="req-state-6">-</dd>
	<dt><strong>OVERALL:</strong></dt>
	<dd id="req-state-all">-</dd>
</dl>


</body>
</html>